<template>
  <div>
    <!-- 我的频道 -->
    <div class="my">
      <van-cell center title="我的频道">
        <template>
          <van-button
            @click="showFlag=!showFlag"
            plain
            hairline
            color="#f85959"
            type="info"
            round
            size="mini"
          >{{showFlag?'完成':'编辑'}}</van-button>
        </template>
      </van-cell>
      <van-grid :gutter="10">
        <van-grid-item
          v-for="(item2, index2) in channelList"
          :key="index2"
          @click="delhandler(index2 ,item2.id)"
        >
          <template #text>
            <span class="text" :class="{active:activeName==index2}">{{item2.name}}</span>
          </template>
          <template #icon>
            <van-icon v-if="showFlag" name="clear" color="#cacaca" class="clear-icon" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 频道推荐 -->
    <div class="channel">
      <van-cell title="频道推荐" />
      <van-grid :gutter="10">
        <van-grid-item
          v-for="(item, index) in channel"
          :key="index"
          @click="addhandler(item,item.id)"
        >
          <span class="add">+</span>
          <span class="txt">{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { SET_TOKEN, GET_TOKEN } from "@/utils/storage.js";
import {
  allchannels_api,
  delchannels_api,
  addchannels_api,
} from "@/api/user.js";
export default {
  props: ["channelList", "activeName"],
  data() {
    return {
      allchannel: [],
      showFlag: false,
      isEdit: "",
    };
  },
  created() {
    this.allchannels();
  },
  methods: {
    // 获取所有频道
    async allchannels() {
      const { data: res } = await allchannels_api();
      console.log(res, 123);
      this.allchannel = res.data.channels;
    },
    // 删除
    async delhandler(index, id) {
      if (!this.showFlag) {
        // 编辑
        this.$emit("father", index, false);
      } else {
        // 完成
        console.log(id == 0, 1);
        if (id == 0) {
          return;
        } else {
          this.channelList.splice(index, 1);
        }
        if (index <= this.activeName) {
          this.$emit("father", index, true);
        }
      }
      // 是否登录
      if (this.user) {
        // 登录：发送请求  删除
        const { data: res } = await delchannels_api(id);
        // console.log(res, 22222);
      } else {
        // 未登录：做本地缓存
        // 未登录获取本地缓存的数据
        SET_TOKEN("chanelMy", this.channelList);
        // this.$emit("addchannel");
        this.channelList = GET_TOKEN("chanelMy");
        // const { data: res } = await delchannels_api(id);
      }
    },
    // 添加
    async addhandler(item, id) {
      this.channelList.push(item);
      // 是否登录
      if (this.user) {
        // 登录：发送请求  删除
        // this.channelList.push(item);
        const { data: res } = await addchannels_api([
          {
            id: id,
            seq: this.channelList.length,
          },
        ]);
      } else {
        // 未登录：做本地缓存
        // 未登录获取本地缓存的数据
        SET_TOKEN("chanelMy", this.channelList);
        // this.$emit("addchannel");
        this.channelList = GET_TOKEN("chanelMy");
      }
    },
  },
  computed: {
    ...mapState(["user"]),
    // 获取除去我的频道里剩下的频道
    channel() {
      return this.allchannel.filter((item1) => {
        return !this.channelList.find((item2) => {
          return item1.id == item2.id;
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.van-grid-item__icon-wrapper {
  position: absolute;
  font-size: 30px;
  top: -5px;
  right: -5px;
  z-index: 99;
}
.text {
  font-size: 25px;
  padding: 5px 10px;
}
.active {
  color: #fd3434;
}
</style>